<template>
  <div class="p-2">
    <el-card>

      <div class="card-header">
        {{ form.name }}详细信息
      </div>
      <el-divider />
      <div class="row">
        <div class="col">
          <div class="label">
            创建时间：
          </div>
          <div class="value"> {{ form.createTime||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            用工姓名：
          </div>
          <div class="value"> {{ form.name||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            身份证号：
          </div>
          <div class="value"> {{ form.cardId||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            手机号：
          </div>
          <div class="value"> {{ form.phone||'' }} </div>
        </div>
        <div class="col">
          <div class="label">
            账户状态：
          </div>
          <div class="value"> {{ form.statusStr||'' }} </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">
            身份证正面：
          </div>
          <div class="value">
            <ImagePreview
              :width="100"
              :height="100"
              :src="form.cardPositive"
              :preview-src-list="[form.cardPositive]"
            />
          </div>
        </div>
        <div class="col">
          <div class="label">
            身份证反面：
          </div>
          <div class="value">
            <ImagePreview
              :width="100"
              :height="100"
              :src="form.cardBack"
              :preview-src-list="[form.cardBack]"
            />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">
            人脸照片：
          </div>
          <div class="value">
            <ImagePreview
              :width="100"
              :height="100"
              :src="form.photoPat"
              :preview-src-list="[form.photoPat]"
            />
          </div>
        </div>
      </div>
      <div class="card-header mt40">
        银行卡列表
      </div>
      <el-divider />
      <el-table
        :data="bankList"
        border
      >
        <el-table-column
          label="支付通道"
          align="center"
          min-width="160"
          prop="passage"
        />

        <el-table-column
          label="银行名称"
          align="center"
          min-width="160"
          prop="bankType"
        />
        <el-table-column
          label="银行卡号"
          align="center"
          min-width="160"
          prop="bankCard"
        />
        <el-table-column
          label="预留手机号"
          align="center"
          min-width="160"
          prop="phone"
        />
        <el-table-column
          label="银行卡照片"
          align="center"
          min-width="160"
          prop="signStatus"
        >
          <template #default="scope">
            <ImagePreview
              :width="100"
              :height="100"
              :src="scope.row.bankCardPic"
              :preview-src-list="[scope.row.bankCardPic]"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="card-footer">
        <el-button @click="returnOn()">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="memberDetail" lang="ts">
import api from '@/api/workMag/contractInquiry';

import { MemberInfoVo, MemberBankListVo } from '@/api/workMag/contractInquiry/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const form = ref<MemberInfoVo>({
  addBy: '',
  address: '',
  addTime: '',
  alipayLogonId: '',
  bankAccId: '',
  bankCard: '',
  bankType: '',
  birthday: '',
  /**
   * 身份证反面
   */
  cardBack: '',
  /**
   * 身份证号
   */
  cardId: '',
  /**
   * 身份证正面
   */
  cardPositive: '',
  /**
   * 创建时间
   */
  createTime: '',
  editer: '',
  editTime: '',
  expiryDate: '',
  id: '',
  isAuth: '',
  isAuthentication: '',
  isRegister: '',
  isSign: '',
  issue: '',
  issueDate: '',
  moneyYear: '',
  moneyYearDate: '',
  /**
   * 用工姓名
   */
  name: '',
  nation: '',
  openId: '',
  /**
   * 手机号
   */
  phone: '',
  /**
   * 人脸照片
   */
  photoPath: '',
  referrerBy: '',
  sex: '',
  signTime: '',
  status: '',
  /**
   * 账户状态
   */
  statusStr: '',
  tag: '',
  userArea: '',
  userAreaName: ''
});
const bankList = ref<MemberBankListVo[]>([]);
const route = useRoute();
const memberId = ref<any>('');
const workId = ref('');
/** 查询企业信息 */
const getInfoData = async () => {
  const res = await api.selWkInfo(memberId.value);
  form.value = res.data;
  const resList = await api.selWkBankList(workId.value);
  bankList.value = resList.data;
};
// 返回
const returnOn = () => {
  proxy?.$router.go(-1);
  proxy?.$tab.closePage(route);
};

onMounted(() => {
  if (route.query.id) {
    memberId.value = route.query.id;
    workId.value = route.query.workId;
    getInfoData(); // 查询企业信息
  }
});
</script>

<style lang="scss" scoped>
.card-header {
  font-weight: 700;
}
.mt40 {
  margin-top: 40px;
}
.el-divider--horizontal {
  margin: 15px 0;
}
.card-footer {
  margin-top: 20px;
  text-align: center;
}
</style>
